<template>

  <div id="container"></div>
</template>

<script>

import MapLoader from "@/utils/loadMap";

// eslint-disable-next-line no-unused-vars


export default {
  name: 'HelloWorld',
  mounted() {
    MapLoader().then(
        (AMap) => {
          // eslint-disable-next-line no-unused-vars
          var map = new AMap.Map("container", {
            zoom: 15,
            expandZoomRange: true,
            zooms: [4, 18],//设置地图级别范围
            center:[121.24547,30.158781],//lat,lon
            // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
            pitch: 30, // 地图俯仰角度，有效范围 0 度- 83 度
            viewMode: '3D',// 地图模式
            resizeEnable: true,//这个好像有问题,自动定位

          });



          addMarker(121.24547,30.158781)

          function addMarker(lat,lon){
            var marker = new AMap.Marker({
              position: [lat, lon]
            })
            var info = [];
            info.push("<div> ");
            info.push("<div style=\"padding:0px 0px 0px 0px;\">高德软件");
            info.push("电话 : 010-84107000   邮编 : 100102");
            info.push("地址 :北京市朝阳区望京阜荣街10号首开广场4层</div></div>");
            var infoWindow = new AMap.InfoWindow({
              offset: new AMap.Pixel(0, -40),
              anchor: 'bottom-center',
              content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
            });
            var onMarkerClick = function (e) {

              infoWindow.open(map, e.target.getPosition());//打开信息窗体
              //e.target就是被点击的Marker
            }
            marker.on('click', onMarkerClick);//绑定click事件
            map.add(marker)

            function closeInfo() {
              infoWindow.close();
            }
            map.on('click', showInfoClick);
            function showInfoClick(){
              closeInfo()
            }
          }


          AMap.plugin([
            'AMap.Geolocation',
          ], function () {
            var geolocation = new AMap.Geolocation({
              // 是否使用高精度定位，默认：true
              enableHighAccuracy: true,
              // 设置定位超时时间，默认：无穷大
              timeout: 10000,
              // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
              buttonOffset: new AMap.Pixel(50, 50),
              //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              zoomToAccuracy: true,
              //  定位按钮的排放位置,  RB表示右下
              buttonPosition: 'RB'
            })

            map.addControl(geolocation);
          });


          // AMap.plugin(
          //     [
          //       "AMap.ToolBar",
          //       "AMap.Scale",
          //       "AMap.OverView",
          //       "AMap.Geocoder",
          //       "AMap.Autocomplete",
          //     ],
          //     () => {
          //       var layer = new AMap.LabelsLayer({
          //         zooms: [3, 20],
          //         zIndex: 1000,
          //         // 开启标注避让，默认为开启，v1.4.15 新增属性
          //         collision: true,
          //         // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
          //         animation: true,
          //       });
          //
          //       map.add(layer);
          //
          //       var markers = [];
          //
          //       for (let i = 0; i < LabelsData.length; i++) {
          //         const curData = LabelsData[i];
          //         curData.extData = {
          //           index: i,
          //         };
          //
          //         const labelMarker = new AMap.LabelMarker(curData);
          //
          //         labelMarker.on("click", (e) => {
          //           /* console.log(e);
          //           console.log(labelMarker.getOptions()); */
          //           if (e.target.getOptions().hhhhhh === 11111) {
          //             alert('不能标记了，哈哈哈');
          //             return;
          //           }
          //           labelMarker.setText({
          //             content: `山西刀削面${e.target.getOptions().extData.index}`,
          //             // direction: "top",
          //             // offset: [0, 0],
          //             style: {
          //               fontSize: 13,
          //               fontWeight: "normal",
          //               fillColor: "#fff",
          //               // padding: "2, 5",
          //               backgroundColor: "red",
          //             },
          //           });
          //         });
          //
          //         markers.push(labelMarker);
          //
          //         layer.add(labelMarker);
          //       }
          //
          //       map.setFitView();
          //     }
          // );
        },
        (e) => {
          console.log("地图加载失败", e);
        }
    )
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>


* {
  padding: 0;
  margin: 0;
}

#container {
  //margin: 30px auto;
  //width: 500px;
  //height: 500px;
  width: 100vw;
  height: 100vh;
}


</style>
